<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--
    demo1-demo2:
    删去导航跳转插件及js，删去wow插件及animate文件，
    删去导航跳转所转到的内容区，保留导航区及底部区
    --->
    <meta charset="UTF-8">
    <!--IE8开启标准渲染模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--配置视窗-->
    <!--确保适当的绘制和触屏缩放-->
    <!--width – viewport的宽度 height – viewport的高度-->
    <!--initial-scale – 初始的缩放比例-->
    <!--user-scalable – 用户是否可以手动缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>bootstrap项目实战</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-maizi.css">
</head>
<body>
<!--导航-->
<!--最外层-->
<nav class="navbar navbar-default">
    <!--容器层-->
    <!--container 定宽：固定宽度值-->
    <!--container-fluid 百分比：根据流媒体视窗的百分比决定-->
    <div class="container">
        <!--小屏幕导航按钮和logo-->
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="index.html" class="navbar-brand">Maizi Admin</a>
        </div>
        <!--小屏幕导航按钮和logo-->
        <!--导航-->
        <div class="navbar-collapse collapse">
            <!--nav类去掉前面的*样式-->
            <ul class="nav navbar-nav">
                <li><a href="index.html"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;后台首页</a></li>
                <li class="active"><a href="user_list.html"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;用户管理</a>
                </li>
                <li><a href="content.html"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;内容管理</a></li>
                <li><a href="tag.html"><span class="glyphicon glyphicon-tags"></span>&nbsp;&nbsp;标签管理</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a id="dropdownMenu1" type="button" data-toggle="dropdown" aria-haspopup="true"
                       aria-expanded="false">
                        admin
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li><a href="index.html"><span
                                class="glyphicon glyphicon-screenshot"></span>&nbsp;&nbsp;前台首页</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;个人主页</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-cog"></span>&nbsp;&nbsp;个人设置</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-credit-card"></span>&nbsp;&nbsp;账户中心</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-heart"></span>&nbsp;&nbsp;我的收藏</a></li>
                    </ul>
                </li>
                <li><a href="#"><span class="glyphicon glyphicon-off"></span>&nbsp;&nbsp;退出</a></li>
            </ul>
        </div>
        <!--导航-->
    </div>
</nav>
<!--导航-->
<div class="container">
    <div class="row">
        <div class="col-md-2">
            <div class="list-group">
                <a href="user_list.html" class="list-group-item">用户管理</a>
                <a href="user_search.html" class="list-group-item active">用户搜索</a>
                <a href="" role="button" data-toggle="modal" data-target="#myModal" class="list-group-item">添加用户</a>
            </div>
        </div>
        <div class="col-md-10">
            <div class="page-header">
                <h1>用户管理</h1>
            </div>
            <ul class="nav nav-tabs">
                <li><a href="user_list.html">用户列表</a></li>
                <li class="active"><a href="user_search.html">用户搜索</a></li>
                <li>
                    <!--添加role="button"属性将a转换为button，将bootstrap的动态实例的按钮的属性复制过来-->
                    <a href="" role="button" data-toggle="modal" data-target="#myModal">添加用户</a>
                </li>
            </ul>
            <form action="#" class="user_search">
                <div class="alert alert-info mar_t15" role="alert"><strong>技巧提示：</strong> 支持模糊搜索和匹配搜索，匹配搜索使用*代替！</div>
                <div class="form-group">
                    <label for="name">用户名</label>
                    <input type="text" class="form-control" id="name" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="uid">UID</label>
                    <input type="text" class="form-control" id="uid" placeholder="输入用户UID">
                </div>
                <div class="form-group">
                    <label for="yonghuzu">选择用户组</label>
                    <select class="form-control" id="yonghuzu">
                        <option>限制会员</option>
                        <option>新手上路</option>
                        <option>注册会员</option>
                        <option>中级会员</option>
                        <option>高级会员</option>
                    </select>
                </div>
                <button class="btn btn-default" type="submit">搜索</button>
            </form>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加用户</h4>
            </div>
            <div class="modal-body">
                <form action="#">
                    <div class="form-group">
                        <label for="addName">用户名</label>
                        <input type="text" class="form-control" id="addName" placeholder="用户名">
                    </div>
                    <div class="form-group">
                        <label for="password">用户密码</label>
                        <input type="password" class="form-control" id="password" placeholder="请输入用户密码">
                    </div>
                    <div class="form-group">
                        <label for="passwordConfirm">确认用户密码</label>
                        <input type="password" class="form-control" id="passwordConfirm" placeholder="请确认用户密码">
                    </div>
                    <div class="form-group">
                        <label for="email">确认用户邮箱</label>
                        <input type="email" class="form-control" id="email" placeholder="请确认用户邮箱">
                    </div>
                    <div class="form-group">
                        <label for="userGroup">所属用户组</label>
                        <select class="form-control" id="userGroup">
                            <option>限制会员</option>
                            <option>新手上路</option>
                            <option>注册会员</option>
                            <option>中级会员</option>
                            <option>高级会员</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>

<!--底部-->
<!--footer-->
<footer>
    <!--整体内容居中显示-->
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p>Copyright&nbsp;©&nbsp;2012-2015&nbsp;&nbsp;www.maiziedu.com&nbsp;&nbsp;蜀ICP备13014270号-4</p>
            </div>
        </div>
    </div>
</footer>
<!--footer-->
<!--底部-->
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>